<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <button
            @click="goBack"
            class="mr-4 p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <div>
            <h1 class="text-2xl font-bold text-gray-900">信息查询</h1>
            <p class="mt-1 text-sm text-gray-600">查看个人信息、班级信息和同学信息</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="refreshData"
            class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            <ArrowPathIcon class="w-4 h-4 mr-2" />
            刷新
          </button>
        </div>
      </div>
    </div>

    <!-- 标签页导航 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            :class="[
              activeTab === tab.id
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
              'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors'
            ]"
          >
            <component :is="tab.icon" class="w-5 h-5 mr-2 inline" />
            {{ tab.name }}
          </button>
        </nav>
      </div>
    </div>

    <!-- 个人信息标签页 -->
    <div v-if="activeTab === 'personal'" class="space-y-6">
      <!-- 基本信息卡片 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-medium text-gray-900">基本信息</h2>
          <button
            @click="editPersonalInfo"
            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            <PencilIcon class="w-4 h-4 mr-1" />
            编辑信息
          </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="md:col-span-1 flex justify-center">
            <div class="relative">
              <div class="w-32 h-32 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
                <img
                  v-if="personalInfo.avatar"
                  :src="personalInfo.avatar"
                  :alt="personalInfo.name"
                  class="w-full h-full object-cover"
                />
                <UserIcon v-else class="w-16 h-16 text-gray-400" />
              </div>
              <button
                @click="uploadAvatar"
                class="absolute bottom-0 right-0 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
              >
                <CameraIcon class="w-4 h-4" />
              </button>
            </div>
          </div>
          
          <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">学号</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.studentId }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.name }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.gender }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ formatDate(personalInfo.birthDate) }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ maskIdCard(personalInfo.idCard) }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">民族</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.ethnicity }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">政治面貌</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.politicalStatus }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">入学时间</label>
              <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ formatDate(personalInfo.enrollmentDate) }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系信息卡片 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">联系信息</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.phone }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.email }}</p>
          </div>
          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">家庭住址</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.address }}</p>
          </div>
        </div>
      </div>

      <!-- 学籍信息卡片 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">学籍信息</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">学院</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.college }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">专业</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.major }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">班级</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.className }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">学制</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.duration }}年</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">学历层次</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ personalInfo.degree }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">学籍状态</label>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="getStatusClass(personalInfo.status)">
              {{ personalInfo.status }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 班级信息标签页 -->
    <div v-if="activeTab === 'class'" class="space-y-6">
      <!-- 班级概览 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">班级概览</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="bg-blue-50 rounded-lg p-4">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <UsersIcon class="w-8 h-8 text-blue-600" />
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-blue-600">班级人数</p>
                <p class="text-2xl font-bold text-blue-900">{{ classInfo.totalStudents }}</p>
              </div>
            </div>
          </div>
          
          <div class="bg-green-50 rounded-lg p-4">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <UserGroupIcon class="w-8 h-8 text-green-600" />
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-green-600">男生人数</p>
                <p class="text-2xl font-bold text-green-900">{{ classInfo.maleCount }}</p>
              </div>
            </div>
          </div>
          
          <div class="bg-pink-50 rounded-lg p-4">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <UserGroupIcon class="w-8 h-8 text-pink-600" />
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-pink-600">女生人数</p>
                <p class="text-2xl font-bold text-pink-900">{{ classInfo.femaleCount }}</p>
              </div>
            </div>
          </div>
          
          <div class="bg-yellow-50 rounded-lg p-4">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <AcademicCapIcon class="w-8 h-8 text-yellow-600" />
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-yellow-600">平均年龄</p>
                <p class="text-2xl font-bold text-yellow-900">{{ classInfo.averageAge }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 班级基本信息 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">班级信息</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">班级名称</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ classInfo.name }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">班级代码</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ classInfo.code }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">班主任</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ classInfo.teacher }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">辅导员</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ classInfo.counselor }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">成立时间</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ formatDate(classInfo.establishedDate) }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">教室</label>
            <p class="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-lg">{{ classInfo.classroom }}</p>
          </div>
        </div>
      </div>

      <!-- 班级公告 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-medium text-gray-900">班级公告</h2>
          <button
            @click="viewAllNotices"
            class="text-sm text-blue-600 hover:text-blue-900 transition-colors"
          >
            查看全部
          </button>
        </div>
        
        <div class="space-y-3">
          <div v-for="notice in classNotices" :key="notice.id" class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <h3 class="text-sm font-medium text-gray-900">{{ notice.title }}</h3>
                <p class="text-sm text-gray-600 mt-1">{{ notice.content }}</p>
                <div class="flex items-center mt-2 text-xs text-gray-500">
                  <span>{{ notice.author }}</span>
                  <span class="mx-2">•</span>
                  <span>{{ formatDateTime(notice.publishTime) }}</span>
                </div>
              </div>
              <span v-if="notice.important" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                重要
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 同学信息标签页 -->
    <div v-if="activeTab === 'classmates'" class="space-y-6">
      <!-- 搜索和筛选 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">搜索同学</label>
            <div class="relative">
              <input
                v-model="classmateFilters.search"
                type="text"
                placeholder="搜索姓名或学号..."
                class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              />
              <MagnifyingGlassIcon class="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">性别</label>
            <select
              v-model="classmateFilters.gender"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            >
              <option value="">全部</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">宿舍楼</label>
            <select
              v-model="classmateFilters.dormitory"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            >
              <option value="">全部宿舍楼</option>
              <option value="1号楼">1号楼</option>
              <option value="2号楼">2号楼</option>
              <option value="3号楼">3号楼</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">排序方式</label>
            <select
              v-model="classmateFilters.sortBy"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            >
              <option value="name">按姓名</option>
              <option value="studentId">按学号</option>
              <option value="age">按年龄</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 同学列表 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">同学信息</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
          <div v-for="classmate in filteredClassmates" :key="classmate.id" class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
                  <img
                    v-if="classmate.avatar"
                    :src="classmate.avatar"
                    :alt="classmate.name"
                    class="w-full h-full object-cover"
                  />
                  <UserIcon v-else class="w-6 h-6 text-gray-400" />
                </div>
              </div>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900 truncate">{{ classmate.name }}</p>
                <p class="text-sm text-gray-500 truncate">{{ classmate.studentId }}</p>
              </div>
            </div>
            
            <div class="mt-4 space-y-2">
              <div class="flex items-center text-sm text-gray-600">
                <span class="w-16 text-gray-500">性别：</span>
                <span>{{ classmate.gender }}</span>
              </div>
              <div class="flex items-center text-sm text-gray-600">
                <span class="w-16 text-gray-500">年龄：</span>
                <span>{{ classmate.age }}岁</span>
              </div>
              <div class="flex items-center text-sm text-gray-600">
                <span class="w-16 text-gray-500">宿舍：</span>
                <span>{{ classmate.dormitory }}</span>
              </div>
              <div class="flex items-center text-sm text-gray-600">
                <span class="w-16 text-gray-500">手机：</span>
                <span>{{ maskPhone(classmate.phone) }}</span>
              </div>
            </div>
            
            <div class="mt-4 flex justify-end">
              <button
                @click="viewClassmateDetail(classmate)"
                class="text-sm text-blue-600 hover:text-blue-900 transition-colors"
              >
                查看详情
              </button>
            </div>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-700">
              显示第 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize, filteredClassmates.length) }} 条，
              共 {{ filteredClassmates.length }} 条记录
            </div>
            <div class="flex items-center gap-2">
              <button
                @click="currentPage--"
                :disabled="currentPage === 1"
                class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                上一页
              </button>
              <span class="px-3 py-1 text-sm font-medium text-gray-700">
                {{ currentPage }} / {{ totalPages }}
              </span>
              <button
                @click="currentPage++"
                :disabled="currentPage === totalPages"
                class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 同学详情弹窗 -->
    <TransitionRoot appear :show="showClassmateModal" as="template">
      <Dialog as="div" @close="showClassmateModal = false" class="relative z-50">
        <TransitionChild
          as="template"
          enter="duration-300 ease-out"
          enter-from="opacity-0"
          enter-to="opacity-100"
          leave="duration-200 ease-in"
          leave-from="opacity-100"
          leave-to="opacity-0"
        >
          <div class="fixed inset-0 bg-black bg-opacity-25" />
        </TransitionChild>

        <div class="fixed inset-0 overflow-y-auto">
          <div class="flex min-h-full items-center justify-center p-4 text-center">
            <TransitionChild
              as="template"
              enter="duration-300 ease-out"
              enter-from="opacity-0 scale-95"
              enter-to="opacity-100 scale-100"
              leave="duration-200 ease-in"
              leave-from="opacity-100 scale-100"
              leave-to="opacity-0 scale-95"
            >
              <DialogPanel class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900 mb-4">
                  同学信息
                </DialogTitle>
                
                <div v-if="selectedClassmate" class="space-y-4">
                  <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
                      <img
                        v-if="selectedClassmate.avatar"
                        :src="selectedClassmate.avatar"
                        :alt="selectedClassmate.name"
                        class="w-full h-full object-cover"
                      />
                      <UserIcon v-else class="w-8 h-8 text-gray-400" />
                    </div>
                    <div>
                      <h4 class="text-lg font-medium text-gray-900">{{ selectedClassmate.name }}</h4>
                      <p class="text-sm text-gray-500">{{ selectedClassmate.studentId }}</p>
                    </div>
                  </div>
                  
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label class="block text-sm font-medium text-gray-700">性别</label>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedClassmate.gender }}</p>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700">年龄</label>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedClassmate.age }}岁</p>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700">宿舍</label>
                      <p class="mt-1 text-sm text-gray-900">{{ selectedClassmate.dormitory }}</p>
                    </div>
                    <div>
                      <label class="block text-sm font-medium text-gray-700">手机</label>
                      <p class="mt-1 text-sm text-gray-900">{{ maskPhone(selectedClassmate.phone) }}</p>
                    </div>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700">家乡</label>
                    <p class="mt-1 text-sm text-gray-900">{{ selectedClassmate.hometown }}</p>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700">兴趣爱好</label>
                    <p class="mt-1 text-sm text-gray-900">{{ selectedClassmate.hobbies || '暂无' }}</p>
                  </div>
                </div>

                <div class="mt-6 flex justify-end">
                  <button
                    type="button"
                    @click="showClassmateModal = false"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
                  >
                    关闭
                  </button>
                </div>
              </DialogPanel>
            </TransitionChild>
          </div>
        </div>
      </Dialog>
    </TransitionRoot>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'
import {
  Dialog,
  DialogPanel,
  DialogTitle,
  TransitionChild,
  TransitionRoot
} from '@headlessui/vue'
import {
  ArrowPathIcon,
  UserIcon,
  UsersIcon,
  UserGroupIcon,
  AcademicCapIcon,
  PencilIcon,
  CameraIcon,
  MagnifyingGlassIcon,
  InformationCircleIcon,
  DocumentTextIcon
} from '@heroicons/vue/24/outline'

// 使用stores和router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const activeTab = ref('personal')
const personalInfo = ref({})
const classInfo = ref({})
const classNotices = ref([])
const classmates = ref([])
const selectedClassmate = ref(null)
const showClassmateModal = ref(false)
const currentPage = ref(1)
const pageSize = ref(9)

const classmateFilters = ref({
  search: '',
  gender: '',
  dormitory: '',
  sortBy: 'name'
})

// 标签页配置
const tabs = [
  { id: 'personal', name: '个人信息', icon: UserIcon },
  { id: 'class', name: '班级信息', icon: UsersIcon },
  { id: 'classmates', name: '同学信息', icon: UserGroupIcon }
]

// 计算属性
const filteredClassmates = computed(() => {
  let filtered = classmates.value
  
  if (classmateFilters.value.search) {
    const search = classmateFilters.value.search.toLowerCase()
    filtered = filtered.filter(classmate => 
      classmate.name.toLowerCase().includes(search) ||
      classmate.studentId.toLowerCase().includes(search)
    )
  }
  
  if (classmateFilters.value.gender) {
    filtered = filtered.filter(classmate => classmate.gender === classmateFilters.value.gender)
  }
  
  if (classmateFilters.value.dormitory) {
    filtered = filtered.filter(classmate => classmate.dormitory.includes(classmateFilters.value.dormitory))
  }
  
  // 排序
  filtered.sort((a, b) => {
    const sortBy = classmateFilters.value.sortBy
    if (sortBy === 'name') {
      return a.name.localeCompare(b.name, 'zh-CN')
    } else if (sortBy === 'studentId') {
      return a.studentId.localeCompare(b.studentId)
    } else if (sortBy === 'age') {
      return a.age - b.age
    }
    return 0
  })
  
  return filtered
})

const totalPages = computed(() => {
  return Math.ceil(filteredClassmates.value.length / pageSize.value)
})

const paginatedClassmates = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredClassmates.value.slice(start, end)
})

// 方法
const refreshData = async () => {
  try {
    await Promise.all([
      loadPersonalInfo(),
      loadClassInfo(),
      loadClassmates()
    ])
    appStore.showNotification('数据刷新成功', 'success')
  } catch (error) {
    appStore.showNotification('刷新失败，请重试', 'error')
  }
}

const goBack = () => {
  router.push('/student/home')
}

const loadPersonalInfo = async () => {
  // 模拟加载个人信息
  personalInfo.value = {
    studentId: '2024001',
    name: '张三',
    gender: '男',
    birthDate: '2005-03-15',
    idCard: '330102200503151234',
    ethnicity: '汉族',
    politicalStatus: '共青团员',
    phone: '13812345678',
    email: 'zhangsan@example.com',
    address: '浙江省杭州市西湖区文三路123号',
    college: '计算机学院',
    major: '计算机科学与技术',
    className: '计算机2024-1班',
    duration: 4,
    degree: '本科',
    status: '在读',
    enrollmentDate: '2024-09-01',
    avatar: null
  }
}

const loadClassInfo = async () => {
  // 模拟加载班级信息
  classInfo.value = {
    name: '计算机2024-1班',
    code: 'CS2024-1',
    teacher: '李老师',
    counselor: '王老师',
    establishedDate: '2024-09-01',
    classroom: '教学楼A-301',
    totalStudents: 45,
    maleCount: 28,
    femaleCount: 17,
    averageAge: 19
  }
  
  // 模拟班级公告
  classNotices.value = [
    {
      id: 1,
      title: '关于期中考试安排的通知',
      content: '期中考试将于下周进行，请同学们做好复习准备...',
      author: '李老师',
      publishTime: '2024-10-15T09:00:00',
      important: true
    },
    {
      id: 2,
      title: '班级活动通知',
      content: '本周六将组织班级团建活动，地点在学校体育馆...',
      author: '王老师',
      publishTime: '2024-10-14T14:30:00',
      important: false
    },
    {
      id: 3,
      title: '课程调整通知',
      content: '由于教师出差，本周三的数据结构课程调整到周五...',
      author: '李老师',
      publishTime: '2024-10-13T16:20:00',
      important: false
    }
  ]
}

const loadClassmates = async () => {
  // 模拟加载同学信息
  classmates.value = [
    {
      id: 1,
      studentId: '2024002',
      name: '李四',
      gender: '女',
      age: 19,
      phone: '13987654321',
      dormitory: '1号楼-201',
      hometown: '江苏省南京市',
      hobbies: '阅读、音乐、绘画',
      avatar: null
    },
    {
      id: 2,
      studentId: '2024003',
      name: '王五',
      gender: '男',
      age: 20,
      phone: '13765432109',
      dormitory: '2号楼-305',
      hometown: '山东省青岛市',
      hobbies: '篮球、游戏、编程',
      avatar: null
    },
    {
      id: 3,
      studentId: '2024004',
      name: '赵六',
      gender: '女',
      age: 19,
      phone: '13654321098',
      dormitory: '1号楼-108',
      hometown: '广东省深圳市',
      hobbies: '舞蹈、旅行、摄影',
      avatar: null
    },
    {
      id: 4,
      studentId: '2024005',
      name: '孙七',
      gender: '男',
      age: 18,
      phone: '13543210987',
      dormitory: '3号楼-412',
      hometown: '四川省成都市',
      hobbies: '足球、电影、美食',
      avatar: null
    },
    {
      id: 5,
      studentId: '2024006',
      name: '周八',
      gender: '女',
      age: 19,
      phone: '13432109876',
      dormitory: '1号楼-315',
      hometown: '湖北省武汉市',
      hobbies: '瑜伽、烘焙、手工',
      avatar: null
    }
  ]
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const formatDateTime = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

const maskPhone = (phone) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const getStatusClass = (status) => {
  const statusMap = {
    '在读': 'bg-green-100 text-green-800',
    '休学': 'bg-yellow-100 text-yellow-800',
    '退学': 'bg-red-100 text-red-800',
    '毕业': 'bg-blue-100 text-blue-800'
  }
  return statusMap[status] || 'bg-gray-100 text-gray-800'
}

const editPersonalInfo = () => {
  // 跳转到信息编辑页面
  appStore.showNotification('跳转到信息编辑页面', 'info')
}

const uploadAvatar = () => {
  // 上传头像功能
  appStore.showNotification('头像上传功能开发中', 'info')
}

const viewAllNotices = () => {
  // 查看所有公告
  appStore.showNotification('跳转到公告页面', 'info')
}

const viewClassmateDetail = (classmate) => {
  selectedClassmate.value = classmate
  showClassmateModal.value = true
}

// 生命周期
onMounted(() => {
  loadPersonalInfo()
  loadClassInfo()
  loadClassmates()
})
</script>